<template>
  <div class="p-5 h-full">
    <!-- actions buttons for calendar -->

    <!-- left side  -->
    <!-- Year, Month & Current Program and Dropdown -->
    <!-- right side -->
    <!-- Increment and Decrement Button, View change button default is months or can be set via props! -->

    <div class="flex justify-between mb-2">
      <span class="text-xl font-medium">
        {{ getMonth() + ', ' + currentYear }}</span
      >
      <div class="flex gap-x-1">
        <!-- <button class="border-2 border-green-500 p-2">Previous</button> -->
        <Button
          @click="decrementMonth"
          variant="ghost"
          class="h-4 w-4"
          icon="chevron-left"
        />
        <Button
          @click="incrementMonth"
          variant="ghost"
          class="h-4 w-4"
          icon="chevron-right"
        />
      </div>
    </div>

    <div class="h-[92%] min-h-[600px] min-w-[600px]">
      <!-- Day List -->
      <div class="grid grid-cols-7 w-full pb-2">
        <span
          v-for="day in daysList"
          class="text-center text-gray-600 font-normal text-sm"
          >{{ day }}</span
        >
      </div>

      <!-- Date Grid -->
      <div
        class="grid grid-cols-7 border-t-[1px] border-l-[1px] h-full w-full grid-rows-6"
      >
        <div
          v-for="date in currentMonthDates"
          class="border-r-[1px] border-b-[1px] border-gray-200"
        >
          <div
            class="flex justify-center h-full font-normal mx-2"
            :class="currentMonthDate(date) ? 'text-gray-500' : 'text-gray-200'"
          >
            <div
              v-if="currentMonthDate(date)"
              class="relative flex flex-col items-center w-full overflow-y-auto"
            >
              <span
                class="py-1 sticky top-0 bg-white w-full text-center z-10"
                :class="
                  date.toDateString() === new Date().toDateString() &&
                  'font-bold'
                "
              >
                {{ date.getDate() }}
              </span>

              <div class="w-full">
                <CalendarEvent
                  v-for="calendarEvent in parsedData[parseDate(date)]"
                  :event="calendarEvent"
                  :date="date"
                  class="mb-2 cursor-pointer w-full"
                  :draggable="false"
                  :key="calendarEvent.name"
                />
              </div>
            </div>
            <span v-else>{{
              shortMonthList[date.getMonth()] + ' ' + date.getDate()
            }}</span>
          </div>
        </div>
      </div>
      <!-- <div class=" w-20 h-20 bg-orange-400 absolute top-[212px] left">
				
			</div> -->
    </div>
  </div>
</template>
<script setup>
import { getCalendarDates } from '../utils'
import { computed, ref } from 'vue'
import CalendarEvent from './CalendarEvent.vue'
import { FeatherIcon, Button } from 'frappe-ui'
import { groupBy } from '@/utils'

const props = defineProps({
  events: {
    type: Object,
    required: false,
  },
})

let currentMonth = ref(new Date().getMonth())
let currentYear = ref(new Date().getFullYear())

let monthList = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
]

let shortMonthList = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
]

let daysList = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

let currentMonthDates = computed(() => {
  let allDates = getCalendarDates(currentMonth.value, currentYear.value)
  return allDates
})

let parsedData = computed(() => groupBy(props.events, (row) => row.date))

function parseDate(date) {
  let dd = date.getDate()
  let mm = date.getMonth() + 1
  let yyyy = date.getFullYear()

  if (dd < 10) dd = '0' + dd
  if (mm < 10) mm = '0' + mm

  return `${yyyy}-${mm}-${dd}`
}

function getMonth() {
  return monthList[currentMonth.value]
}

function incrementMonth() {
  currentMonth.value++
  if (currentMonth.value > 11) {
    currentMonth.value = 0
    currentYear.value++
  }
}

function decrementMonth() {
  currentMonth.value--
  if (currentMonth.value < 0) {
    currentMonth.value = 11
    currentYear.value--
  }
}

function currentMonthDate(date) {
  return date.getMonth() === currentMonth.value
}
</script>

<style></style>
